Build out the Highlight component so that it can work with both:

1. Unformatted code (we have to now pass in a prop to Highlight to tell it what language to use in this case)

.someCode {
  display: block;
}

2. Pre-formatted code (this will come from transformers of some sort, such as gatsby-transformer-remark). This format appears to be a standard and it seems to work well with Prismjs which is the syntax highlighting library in use in this repo. No language required as a prop since the data is already in the markup.

<pre class="language-css"><code class="language-css">
.someCode {
  display: block;
}
</pre></code>

In the process, I noticed some duplication in the global styles that we are exporting for styling pre and code blocks. Those styles have since been moved to the Highlight component.

Heads up @jonniebigodes since I know you were potentially going to be looking at this component.